<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>个人信息</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link href="css/element/index.css" rel="stylesheet"/>
    <link href="/end/css/element/index.css" rel="stylesheet">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="wrapper" v-cloak>
    <!-- 头部开始 -->
    <div style="width: 100%; height: 60px; line-height: 60px; background: #333">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div style="color: #04bd4b; font-size: 20px;">企业员工绩效考核管理系统</div>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <span v-if="user.name" style="color: #eee;">
                        <span style="color: #04bd4b; margin-right: 20px">{{user.name}}</span>
                        <a style="color: #eee;" href="javascript:void(0)" @click="logout">退出</a>
                        <a style="color: #eee;" v-if="isCollect" style="margin-left: 10px" href="collectInfo.html">收藏夹</a>
                    </span>
                </div>
                <div class="col-md-2" style="text-align: right">
                    <a href="/end/page/login.html" target="_blank" style="color: #eee; margin-right: 10px">登录</a>
                    <a href="/end/page/register.html" target="_blank" style="color: #eee;">注册</a>
                </div>
            </div>

        </div>
    </div>
    <!-- 导航开始 -->
    <div class="container" style="margin: 5px auto">
        <div style="width: 100%; height: 50px; line-height: 50px;">
            <div class="col-md-12" style="padding: 0">
                <div class="row">
                    <ul style="display: flex;">
                        <li class="nav-item"><a href="index.html">首页</a></li>
                        <li class="nav-item"><a href="advertiserInfo.html">公告信息</a></li>
			<li class="nav-item"><a href="messageInfo.html">在线留言</a></li>
			<li class="nav-item"><a href="submitInfo.html">评估考核</a></li>
			<li class="nav-item"><a href="richtextInfo.html">站内新闻</a></li>
<!--			<li class="nav-item"><a href="cartInfo.html">购物车信息</a></li>-->
<!--			<li class="nav-item"><a href="orderInfo.html">订单信息</a></li>-->
			<li class="nav-item"><a href="commentInfo.html">意见征集</a></li>

                        <li class="nav-item active"><a href="javascript:void(0)" @click="personalPage">个人信息</a></li>
                        <li class="nav-item" v-if="isShow"><a href="/end/page/index.html" target="_blank">进入后台系统</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航结束 -->
    <!-- 头部结束 -->
    <div class="container"  style="margin-top: 20px">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        个人信息
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal">
                            <input type="hidden" v-model="entity.id">
							<div class="form-group">
								<label class="col-sm-3 control-label">姓名</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.name" placeholder="请输入姓名">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">职位</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.nickName" placeholder="请输入职位">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">性别</label>
								<div class="col-sm-5">
									<label class="radio-inline">
										<input type="radio" value="男" v-model="entity.sex">男
									</label>
									<label class="radio-inline">
										<input type="radio" value="女" v-model="entity.sex">女
									</label>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">年龄</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.age" placeholder="请输入年龄">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">生日</label>
								<div class="col-sm-5">
									<div class="block">
										<el-date-picker v-model="entity.birthday" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">手机号</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.phone" placeholder="请输入手机号">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">部门</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.address" placeholder="请输入部门">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">编号</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.code" placeholder="请输入编号">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">邮箱</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.email" placeholder="请输入邮箱">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">身份证</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.cardId" placeholder="请输入身份证">
								</div>
							</div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">账户余额</label>
                                <div class="col-sm-7" style="line-height: 35px">
                                    ￥ {{entity.account}}
                                </div>
                            </div>
                        </form>
                        <div style="text-align: center">
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#rechargeModal" @click="account=100">充值</button>
                            <button type="button" class="btn btn-primary" @click="update()">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 充值模态框 -->
    <div class="modal" tabindex="-1" role="dialog" id="rechargeModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="modal-title">充值</span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal">
                        <input type="hidden" name="id" v-model="entity.id">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">金额</label>
                            <div class="col-sm-7">
                                <input type="text" class="form-control" v-model="account" placeholder="请输入充值金额">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="recharge()">确定</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.metisMenu.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="js/my.js"></script>
<script src="/end/js/element/index.js"></script>

<script>
    new Vue({
        el: '#wrapper',
        data: {
            isCollect: false,
            entity: {
                sex: '男'
            },
            user: {},
            isShow: false,
            account: null
        },

        created: function () {
            this.loadData();
        },
        methods: {
            loadData() {
                axios.get('/auth').then(res => {
                    if (res.data.code === '0') {
                        this.user = res.data.data;
                        if (this.user.level !== 3) {
                            this.isShow = true;
                        }
                        axios.get("/adminInfo/" + this.user.id).then(res => {
                            if (res.data.code === '0') {
                                this.entity = res.data.data;
                            } else {
                                alert(res.data.msg);
                            }
                        });
                    } else {
                        alert(res.data.msg);
                        location.href = '/end/page/login.html';
                    }
                })
            },
            update() {
                if (this.entity.phone && this.entity.phone !== "") {
                    let reg = /^[1][3,4,5,7,8][0-9]{9}$/;
                    if (!reg.test(this.entity.phone)) {
                        alert("请输入正确的手机号");
                        return;
                    }
                }
                axios.put("/adminInfo", this.entity).then(res => {
                    if (res.data.code === '0') {
                        alert('更新成功');
                        this.loadData();
                    } else {
                        msg('error', res.data.msg);
                    }
                })
            },
            recharge() {
                let data = {id: this.entity.id, account: parseFloat(this.entity.account) + parseFloat(this.account)};
                axios.put("/adminInfo", data).then(res => {
                    if (res.data.code === '0') {
                        alert('充值成功');
                        $("#rechargeModal").modal('hide');
                        this.loadData();
                    } else {
                        alert(res.data.msg);
                    }
                })
            },
            logout() {
                axios.get("/logout").then(res => {
                    if(res.data.code === '0') {
                        location.href = '/front/index.html';
                    } else {
                        alert(res.data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>
